<template>
	<view>
		<view class="search-box">
			<uni-search-bar v-model="key" radius="100" placeholder="请输入搜索内容" cancelButton="none" @input="onInput" />
		</view>

		<!-- 搜索结果列表区域 -->
		<!-- v-if="key != ''" -->
		<!-- 如果是''相当于就是false -->
		<!-- 如果不为空，就是任意字符串，那任意字符串只要不是空字符串，都是是true -->
		<uni-list v-if="key">
			<uni-list-item v-for="item in resultList" :key="item.goods_id" :title="item.goods_name" link
				:to="`/subpkg/goods_detail/goods_detail?goods_id=${item.goods_id}`">
			</uni-list-item>
		</uni-list>

		<!-- 搜索历史区域 -->
		<view v-else class="history-box">
			<view class="title">
				<text>搜索历史</text>
				<uni-icons @click="del" type="trash" size="18"></uni-icons>
			</view>
			<!-- 具体的每一项历史记录 -->
			<view class="history-item">
				<uni-tag class="tag" v-for="item in historyList" :text="item" type="success" @click="toList(item)" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				key: '',
				resultList: [],
				time: null,
				// 存历史记录的数组 -- 本地存储取出来
				// 如果本地存储有就用本地存储的数据，如果没有就给默认值为空数组
				historyList: uni.getStorageSync('history') || []
			};
		},
		methods: {
			// 删除图标的点击事件
			del() {
				// 光删本地存储界面不会变
				uni.removeStorageSync('history')
				// 还要把data里的数组清空
				this.historyList = []
			},
			// 历史记录的点击事件
			toList(item) {
				uni.navigateTo({
					url: "/subpkg/goods_list/goods_list?query=" + item
				})
			},
			onInput() {
				// 每次开启新的之前，把上一次的关掉
				clearTimeout(this.time)

				this.time = setTimeout(async () => {
					if (this.key === '') return
					// 发请求之前我先把历史记录存起来
					// 如果数组里有就不要存了
					const index = this.historyList.indexOf(this.key)
					if (index !== -1) {
						this.historyList.splice(index, 1)
					}
					// 先把输入的内容加到数组里
					this.historyList.unshift(this.key)
					// 把数组存到本地
					uni.setStorageSync('history', this.historyList)

					// 发请求获取搜索的结果
					const res = await uni.$http.get('goods/qsearch', {
						query: this.key
					})
					this.resultList = res.data.message
				}, 500)
			},
		}
	}
</script>

<style lang="scss">
	// 小程序有个原则：默认情况下外面写的样式不影响组件内部
	.search-box {
		background-color: #c00000;
		position: sticky;
		top: 0;
		z-index: 999;
	}

	.history-box {
		.title {
			@at-root		padding: 10px;
			display: flex;
			font-size: 14px;
			justify-content: space-between;
		}

		.history-item {
			display: flex;
			flex-wrap: wrap;
			margin-top: 15px;
			padding-left: 30px;

			.tag {
				margin-right: 10px;
				margin-bottom: 10px;
			}
		}
	}

	::v-deep .uni-list-item__content-title {

		display: inline-block;
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>
